<template>
  <div class="spl-container">
    <breadcrumb :data="pathData"></breadcrumb>
    <div class="emp-container">

      <div class="mt-10 spl-step">
        <el-steps :active="active" align-center finish-status="success">
          <el-step title="导入薪酬"></el-step>
          <el-step title="调整薪酬明细"></el-step>
          <el-step title="核对形成台账"></el-step>
        </el-steps>
      </div>
      <!--第一步-->
      <div v-show="active==0" class="pt-30">
        <div v-show="firstActice==0" class="text-center">
          <div class="first-tip">
            <p><span class="tip"><i class="el-icon-warning ic-tip-yellow"></i><span>请选择台账年月与所属扣缴义务人，并确定开始制作薪酬台账！</span></span>
            </p>
          </div>
          <div>
            <div class="first-border">
              <div class="search-row">
                <label class="label-text required" style="width: auto;">台账年月</label>
                <div class="label-sel">
                  <el-date-picker class="w-150" type="month" v-model="setData.yearDate" value-format="yyyy-MM"></el-date-picker>
                </div>

                <el-select v-model="setData.obligorId" ref="obligor" @change="getSelectLabel($event)" filterable class="w-300 ml-60" placeholder="请选择扣缴义务人">
                  <el-option
                    v-for="item in obligorOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </div>

              <el-button type="primary" class="mt-60 s-btn" @click="doFirstChoose">确定开始</el-button>
            </div>
          </div>
        </div>

        <div v-show="firstActice==1" class="drag-upload">
          <el-row :gutter="24">
            <el-col :span="12">
              <div class="search-row lh-32">
                <label class="label-text required" style="width: auto;">台账年月</label>
                <div class="label-sel"><p v-text="setData.yearDate"></p></div>

                <label class="label-text required ml-60" style="width: auto;">扣缴义务人</label>
                <div class="label-sel"><p v-text="setData.obligorName"></p></div>
              </div>

              <div class="mt-10">

                <el-upload
                  class="upload-demo text-center mt-0"
                  drag
                  action="/api/sys/no-limit/upload/single"
                  :headers="this.$global.setHeaders"
                  :auto-upload="true"
                  :multiple="false"
                  :show-file-list="false"
                  :on-success="uploadSuccess">
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                </el-upload>
              </div>
            </el-col>
            <el-col :span="12">
              <div>
                <el-radio-group v-model="setData.type" size="small" @change="changeType">
                  <el-radio label="1" border>工资薪金</el-radio>
                  <el-radio label="2" border>年终奖</el-radio>
                  <el-radio label="3" border>劳务报酬</el-radio>
                </el-radio-group>
              </div>
              <div class="upload-border">
              <div><p class="mt-5">推荐下载模板，填写正确数据后上传，请<span class="text-blue f-cursor" @click="exportTemplate">下载导入模板</span></p></div>
              <p v-show="setData.fileName1" class="text-orange mt-12">工资薪金：<span class="text-left mt-15" v-text="setData.fileName1"></span></p>
              <p v-show="setData.fileName2" class="text-orange mt-12">年终奖：<span class="text-left mt-15" v-text="setData.fileName2"></span></p>
              <p v-show="setData.fileName3" class="text-orange mt-12">劳务报酬：<span class="text-left mt-15" v-text="setData.fileName3"></span></p>
              </div>
            </el-col>
          </el-row>

          <div class="mt-10" v-show="setData.type=='1'">
            <p><span v-html="'结果：成功'+totalInfos.totalInfo1.successNum+'条&nbsp;&nbsp;&nbsp;&nbsp;失败'"></span><span class="text-red" v-text="totalInfos.totalInfo1.failNum"></span>条
              <span class="ml-100 mr-10 inlineBlock">只看失败</span>
              <el-switch v-model="setData.status1" :activeColor="$global.switchColor[0]"
                         :inactiveColor="$global.switchColor[1]" @change="getFirstTableData('firstTable1')"
                         :active-value="2"
                         :inactive-value="1">
              </el-switch>
            </p>
          </div>
          <div v-show="setData.type=='1'">
            <dTable @fetch="getFirstTableData('firstTable1')" ref="firstTable1" :tableHeight="firstTableHeight" :showIndex="true" :showSelection="true">
              <el-table-column prop="employeeName" label="员工姓名" width="120" header-align="center" align="left" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="employeeIdCard" label="证件号码" width="200" header-align="center" align="left" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="telephone" label="手机号码" width="130" header-align="center" align="left" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="failCase" label="备注" width="250" header-align="center" align="left" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <p class="text-red" v-text="scope.row.failCase"></p>
                </template>
              </el-table-column>
              <el-table-column prop="obligorName" label="扣缴义务人" width="130" header-align="center" align="left" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="incomeDate" label="收入所属期" width="130" header-align="center" align="center" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="plannedAmount" label="应发金额" width="160" header-align="center" align="right" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="taxAmount" label="应缴个税" width="160" header-align="center" align="right" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="actualAmount" label="实发金额" width="160" header-align="center" align="right" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="comment" label="薪酬组成" width="160" header-align="center">
                <el-table-column prop="socialSecurityAmount" label="个人社保合计" width="160" header-align="center" align="left" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="accfundAmount" label="个人公积金" width="160" header-align="center" align="right" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="baseSalary" label="基本工资" width="160" header-align="center" align="right" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column v-for="(item, index) in salaryItems" :key="index" :prop="item" :label="item" min-width="200" header-align="center" align="right" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <p v-text="scope.row.salaryItems==null?'':scope.row.salaryItems[item]"></p>
                  </template>
                </el-table-column>

              </el-table-column>
              <el-table-column prop="comment" label="累计扣除" header-align="center">
                <el-table-column prop="totalTaxThreshold" label="减除费用" min-width="200" header-align="center" align="right" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="entryDate" label="子女教育" min-width="200" header-align="center" align="right" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <p v-text="scope.row.taxAdditionalItems['70018001']"></p>
                  </template>
                </el-table-column>
                <el-table-column prop="entryDate" label="继续教育" min-width="200" header-align="center" align="right" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <p v-text="scope.row.taxAdditionalItems['70018005']"></p>
                  </template>
                </el-table-column>
                <el-table-column prop="entryDate" label="大病医疗" min-width="200" header-align="center" align="right" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <p v-text="scope.row.taxAdditionalItems['70018006']"></p>
                  </template>
                </el-table-column>
                <el-table-column prop="entryDate" label="赡养老人" min-width="200" header-align="center" align="right" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <p v-text="scope.row.taxAdditionalItems['70018004']"></p>
                  </template>
                </el-table-column>
                <el-table-column prop="entryDate" label="住房租金" min-width="200" header-align="center" align="right" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <p v-text="scope.row.taxAdditionalItems['70018003']"></p>
                  </template>
                </el-table-column>
                <el-table-column prop="entryDate" label="住房贷款利息" min-width="300" header-align="center" align="right" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <p v-text="scope.row.taxAdditionalItems['70018002']"></p>
                  </template>
                </el-table-column>
              </el-table-column>
              <template slot="pagination-btns">
                <el-button type="primary" class="opt-btn s-btn" icon="ic-export" @click="exportFirstData">导出</el-button>
                <el-button class="opt-btn white-btn s-btn " icon="el-icon-delete" @click="doDel">删除</el-button>
              </template>
            </dTable>
          </div>

          <div class="mt-10" v-show="setData.type=='2'">
            <p><span v-html="'结果：成功'+totalInfos.totalInfo2.successNum+'条&nbsp;&nbsp;&nbsp;&nbsp;失败'"></span><span class="text-red" v-text="totalInfos.totalInfo2.failNum"></span>条
              <span class="ml-100 mr-10 inlineBlock">只看失败</span>
              <el-switch v-model="setData.status2" :activeColor="$global.switchColor[0]"
                         :inactiveColor="$global.switchColor[1]" @change="getFirstTableData('firstTable2')"
                         :active-value="2"
                         :inactive-value="1">
              </el-switch>
            </p>
          </div>
          <div v-show="setData.type=='2'">
            <dTable @fetch="getFirstTableData('firstTable2')" ref="firstTable2" :tableHeight="firstTableHeight" :showIndex="true" :showSelection="true">
              <el-table-column prop="employeeName" label="员工姓名" min-width="200" header-align="center" align="left" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="employeeIdCard" label="证件号码" min-width="260" header-align="center" align="left" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="telephone" label="手机号码" min-width="240" header-align="center" align="left" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="failCase" label="备注" min-width="300" header-align="center" align="left" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <p class="text-red" v-text="scope.row.failCase"></p>
                </template>
              </el-table-column>
              <el-table-column prop="obligorName" label="扣缴义务人" min-width="280" header-align="center" align="left" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="incomeDate" label="收入所属期" min-width="180" header-align="center" align="center" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="plannedAmount" label="应发金额" min-width="200" header-align="center" align="right" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="taxAmount" label="应缴个税" min-width="200" header-align="center" align="right" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="actualAmount" label="实发金额" min-width="200" header-align="center" align="right" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="adjustAmount" label="年中奖税后调整" min-width="300" header-align="center" align="right" :show-overflow-tooltip="true"></el-table-column>
              <template slot="pagination-btns">
                <el-button type="primary" class="opt-btn s-btn" icon="ic-export" @click="exportFirstData">导出</el-button>
                <el-button class="opt-btn white-btn s-btn " icon="el-icon-delete" @click="doDel">删除</el-button>
              </template>
            </dTable>
          </div>

          <div class="mt-10" v-show="setData.type=='3'">
            <p><span v-html="'结果：成功'+totalInfos.totalInfo3.successNum+'条&nbsp;&nbsp;&nbsp;&nbsp;失败'"></span><span class="text-red" v-text="totalInfos.totalInfo3.failNum"></span>条
              <span class="ml-100 mr-10 inlineBlock">只看失败</span>
              <el-switch v-model="setData.status3" :activeColor="$global.switchColor[0]"
                         :inactiveColor="$global.switchColor[1]" @change="getFirstTableData('firstTable3')"
                         :active-value="2"
                         :inactive-value="1">
              </el-switch>
            </p>
          </div>
          <div v-show="setData.type=='3'">
            <dTable @fetch="getFirstTableData('firstTable3')" ref="firstTable3" :tableHeight="firstTableHeight" :showIndex="true" :showSelection="true">
              <el-table-column prop="employeeName" label="员工姓名" min-width="200" header-align="center" align="left" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="employeeIdCard" label="证件号码" min-width="260" header-align="center" align="left" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="telephone" label="手机号码" min-width="240" header-align="center" align="left" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="failCase" label="备注" min-width="300" header-align="center" align="left" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <p class="text-red" v-text="scope.row.failCase"></p>
                </template>
              </el-table-column>
              <el-table-column prop="obligorName" label="扣缴义务人" min-width="280" header-align="center" align="left" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="incomeDate" label="收入所属期" min-width="180" header-align="center" align="center" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="plannedAmount" label="应发金额" min-width="200" header-align="center" align="right" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="taxAmount" label="应缴个税" min-width="200" header-align="center" align="right" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="actualAmount" label="实发金额" min-width="200" header-align="center" align="right" :show-overflow-tooltip="true"></el-table-column>
              <template slot="pagination-btns">
                <el-button type="primary" class="opt-btn s-btn" icon="ic-export" @click="exportFirstData">导出</el-button>
                <el-button class="opt-btn white-btn s-btn " icon="el-icon-delete" @click="doDel">删除</el-button>
              </template>
            </dTable>
          </div>

          <div class="emp-title mt-10">
            <i class="el-icon-warning ic-tip-yellow mr-10"></i>未收集累计扣除数据的员工，可进入下一步进行补充调整后重算实发
          </div>
          <div class="operate-btns-bottom mt-15">
            <el-button type="primary" @click="doFirstNext">下一步</el-button>
          </div>
        </div>
      </div>
        <!--第二步-->
        <div v-show="active==1" class="pt-30">
          <div class="text-right pr-30">
            <el-input class="w-300 ml-15" placeholder="搜索姓名/证件号码" v-model="setData.searchWord">
              <span slot="suffix" class="f-cursor" @click="getSecondTableData"><i class="el-icon-search font-16 mr-5"></i></span>
            </el-input>
          </div>
          <div class="mt-10">
            <dTable @fetch="getSecondTableData" ref="secondTable" :tableHeight="secondTableHeight" :showIndex="true" :showSelection="true">
              <el-table-column prop="employeeName" label="员工姓名" width="120" header-align="center" align="left" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="employeeIdCard" label="证件号码" width="200" header-align="center" align="left" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="telephone" label="手机号码" width="130" header-align="center" align="left" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="failCase" label="备注" width="250" header-align="center" align="left" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <p class="text-red" v-text="scope.row.failCase"></p>
                </template>
              </el-table-column>
              <el-table-column prop="obligorName" label="扣缴义务人" width="130" header-align="center" align="left" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="incomeDate" label="收入所属期" width="130" header-align="center" align="center" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="plannedAmount" label="应发金额" width="160" header-align="center" align="right" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="taxAmount" label="应缴个税" width="160" header-align="center" align="right" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="actualAmount" label="实发金额" width="160" header-align="center" align="right" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="comment" label="薪酬组成" width="160" header-align="center" :show-overflow-tooltip="true">
                <el-table-column prop="socialSecurityAmount" label="个人社保合计" width="160" header-align="center" align="right" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="accfundAmount" label="个人公积金" width="160" header-align="center" align="right" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="baseSalary" label="基本工资" width="160" header-align="center" align="right" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="salaryItems" v-for="(item, index) in salaryItems" :key="index" :prop="item" :label="item" min-width="200" header-align="center" align="right" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <p v-text="scope.row.salaryItems==null?'':scope.row.salaryItems[item]"></p>
                  </template>
                </el-table-column>

              </el-table-column>
              <el-table-column prop="comment" label="累计扣除" header-align="center">
                <el-table-column prop="totalTaxThreshold" label="减除费用" min-width="200" header-align="center" align="right" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="entryDate" label="子女教育" min-width="200" header-align="center" align="right" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <p v-text="scope.row.taxAdditionalItems['70018001']"></p>
                  </template>
                </el-table-column>
                <el-table-column prop="entryDate" label="继续教育" min-width="200" header-align="center" align="right" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <p v-text="scope.row.taxAdditionalItems['70018005']"></p>
                  </template>
                </el-table-column>
                <el-table-column prop="entryDate" label="大病医疗" min-width="200" header-align="center" align="right" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <p v-text="scope.row.taxAdditionalItems['70018006']"></p>
                  </template>
                </el-table-column>
                <el-table-column prop="entryDate" label="赡养老人" min-width="200" header-align="center" align="right" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <p v-text="scope.row.taxAdditionalItems['70018004']"></p>
                  </template>
                </el-table-column>
                <el-table-column prop="entryDate" label="住房租金" min-width="200" header-align="center" align="right" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <p v-text="scope.row.taxAdditionalItems['70018003']"></p>
                  </template>
                </el-table-column>
                <el-table-column prop="entryDate" label="住房贷款利息" min-width="300" header-align="center" align="right" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <p v-text="scope.row.taxAdditionalItems['70018002']"></p>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="120" header-align="center" align="center">
              <template slot-scope="scope">
                <div class="table-operate-btns">
                  <el-button type="text" icon="el-icon-edit" class="btn edit-btn" @click="editDetail(scope.row)">调整明细</el-button>
                </div>
              </template>
            </el-table-column>
            <template slot="pagination-btns">
              <el-button type="primary" class="opt-btn s-btn" icon="ic-export" @click="exportFirstData('2')">导出</el-button>
            </template>
          </dTable>
          </div>
          <div class="operate-btns-bottom mt-15">
            <el-button class="cancel-btn-border" @click="--active">上一步</el-button>
            <el-button type="primary" class="ml-30" @click="doSecondNext">下一步</el-button>
          </div>
        </div>
        <!--第三步-->
        <div v-show="active==2">
          <div class="substituteSalary mt-5">
            <div class="emp-title">
              <i class="ic-substitute fl mr-30"></i>
              <el-row :gutter="22">
                <el-col :span="6"><p>台账编号：<span v-text="thirdCountData.serialNumber"></span></p></el-col>
                <el-col :span="6"><p>账单年月：<span v-text="$global.dateToStrByFormart(thirdCountData.yearDate,'yyyy-MM')"></span></p></el-col>
                <el-col :span="5"><p>扣缴义务人：<span v-text="setData.obligorName"></span></p></el-col>
              </el-row>
            </div>
            <div class="search-row clearfix mt-15">
              <div class="salary-type ml-0">
                <div class="type"><p class="mt-7">工<br>资<br>薪<br>金</p></div>
                <div class="content">
                  <p class="text">实发合计：<span>{{thirdCountData.details|filterAmountByType('60004001','actualAmount')}}</span>元</p>
                  <p class="text">个税合计：<span>{{thirdCountData.details|filterAmountByType('60004001','taxAmount')}}</span>元</p>
                </div>
              </div>
              <div class="salary-type">
                <div class="type"><p class="mt-16">年<br>终<br>奖</p></div>
                <div class="content">
                  <p class="text">实发合计：<span>{{thirdCountData.details|filterAmountByType('60004002','actualAmount')}}</span>元</p>
                  <p class="text">个税合计：<span>{{thirdCountData.details|filterAmountByType('60004002','taxAmount')}}</span>元</p>
                </div>
              </div>
              <div class="salary-type">
                <div class="type"><p class="mt-7">劳<br>务<br>报<br>酬</p></div>
                <div class="content">
                  <p class="text">实发合计：<span>{{thirdCountData.details|filterAmountByType('60004003','actualAmount')}}</span>元</p>
                  <p class="text">个税合计：<span>{{thirdCountData.details|filterAmountByType('60004003','taxAmount')}}</span>元</p>
                </div>
              </div>

              <div class="fl mt-70 ml-30">
                <span v-text="'总金额： '+$global.milliFormat(thirdCountData.totalAmount,2)+'元'"></span>
                <span class="inlineBlock ml-60" v-text="'总人数：'+thirdCountData.totalNumber"></span>
              </div>
            </div>

            <div>
              <dTable @fetch="getThirdTableData" ref="thirdTable" :tableHeight="thirdTableHeight" :showIndex="true" :showSelection="true">
                <el-table-column prop="employeeName" label="员工姓名" width="120" header-align="center" align="left"></el-table-column>
                <el-table-column prop="employeeIdCard" label="证件号码" width="200" header-align="center" align="left"></el-table-column>
                <el-table-column prop="telephone" label="手机号码" width="130" header-align="center" align="left"></el-table-column>
                <el-table-column prop="failCase" label="备注" width="250" header-align="center" align="left"></el-table-column>
                <el-table-column prop="obligorName" label="扣缴义务人" width="130" header-align="center" align="left"></el-table-column>
                <el-table-column prop="incomeDate" label="收入所属期" width="130" header-align="center" align="center"></el-table-column>
                <el-table-column prop="plannedAmount" label="应发金额" width="160" header-align="center" align="right"></el-table-column>
                <el-table-column prop="taxAmount" label="应缴个税" width="160" header-align="center" align="right"></el-table-column>
                <el-table-column prop="actualAmount" label="实发金额" width="160" header-align="center" align="right"></el-table-column>
                <el-table-column prop="comment" label="薪酬组成" width="160" header-align="center">
                  <el-table-column prop="socialSecurityAmount" label="个人社保合计" width="160" header-align="center" align="right"></el-table-column>
                  <el-table-column prop="accfundAmount" label="个人公积金" width="160" header-align="center" align="right"></el-table-column>
                  <el-table-column prop="baseSalary" label="基本工资" width="160" header-align="center" align="right"></el-table-column>
                  <el-table-column v-for="(item, index) in salaryItems" :key="index" :prop="item" :label="item" min-width="200" header-align="center" align="right">
                    <template slot-scope="scope">
                      <p v-text="scope.row.salaryItems==null?'':scope.row.salaryItems[item]"></p>
                    </template>
                  </el-table-column>

                </el-table-column>
                <el-table-column prop="comment" label="累计扣除" header-align="center">
                  <el-table-column prop="totalTaxThreshold" label="减除费用" min-width="200" header-align="center" align="right"></el-table-column>
                  <el-table-column prop="entryDate" label="子女教育" min-width="200" header-align="center" align="right">
                    <template slot-scope="scope">
                      <p v-text="scope.row.taxAdditionalItems['70018001']"></p>
                    </template>
                  </el-table-column>
                  <el-table-column prop="entryDate" label="继续教育" min-width="200" header-align="center" align="right">
                    <template slot-scope="scope">
                      <p v-text="scope.row.taxAdditionalItems['70018005']"></p>
                    </template>
                  </el-table-column>
                  <el-table-column prop="entryDate" label="大病医疗" min-width="200" header-align="center" align="right">
                    <template slot-scope="scope">
                      <p v-text="scope.row.taxAdditionalItems['70018006']"></p>
                    </template>
                  </el-table-column>
                  <el-table-column prop="entryDate" label="赡养老人" min-width="200" header-align="center" align="right">
                    <template slot-scope="scope">
                      <p v-text="scope.row.taxAdditionalItems['70018004']"></p>
                    </template>
                  </el-table-column>
                  <el-table-column prop="entryDate" label="住房租金" min-width="200" header-align="center" align="right">
                    <template slot-scope="scope">
                      <p v-text="scope.row.taxAdditionalItems['70018003']"></p>
                    </template>
                  </el-table-column>
                  <el-table-column prop="entryDate" label="住房贷款利息" min-width="300" header-align="center" align="right">
                    <template slot-scope="scope">
                      <p v-text="scope.row.taxAdditionalItems['70018002']"></p>
                    </template>
                  </el-table-column>
                </el-table-column>

                <template slot="pagination-btns">
                  <el-button type="primary" class="opt-btn s-btn" icon="ic-export" @click="exportData">导出</el-button>
                </template>
              </dTable>
            </div>
            <div class="operate-btns-bottom">
              <el-button class="cancel-btn-border" @click="active=1">上一步</el-button>
              <el-button type="primary" class="ml-30" :loading="saveAccountingLoading" @click="saveAccounting">确认保存</el-button>
            </div>
          </div>
        </div>
      </div>

    <el-dialog :title="changeSalaryCard.title" class="spl-dialog salaryAccounting-dialog" :visible.sync="editVisible" :closeOnClickModal="false" width="500px">
      <el-radio-group>
        <el-radio-button class="dialog-tab">变更薪资卡</el-radio-button>
      </el-radio-group>
      <el-form :model="changeSalaryCard" ref="changeSalaryCard" label-width="160px" class="mt-10">
        <el-form-item label="银行账号" prop="empBankAccount" class="pay-form-item" :rules="[{ required: true, message: '请填写银行账号'}]">
          <el-input class="w-220" v-model="changeSalaryCard.empBankAccount"></el-input>
        </el-form-item>
        <el-form-item label="银行名称" prop="empBankDictCode" class="pay-form-item" :rules="[{ required: true, message: '请选择银行名称'}]">
          <el-select class="w-220" ref="bankName" v-model="changeSalaryCard.empBankDictCode" placeholder="请选择">
            <el-option v-for="item in bankCodeOptions" :key="item.dictCode" :label="item.dictName" :value="item.dictCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="银行账户名" prop="empAccountName" class="pay-form-item" :rules="[{ required: true, message: '请填写银行账户名'}]">
          <el-input class="w-220" v-model="changeSalaryCard.empAccountName"></el-input>
        </el-form-item>
        <el-form-item label="开户省市" prop="bankProvinces" class="pay-form-item" :rules="[{ required: true, message: '请选择开户省市'}]">
          <!--<el-select class="w-220" v-model="changeSalaryCard.bankProvinces" placeholder="请选择">-->
            <!--<el-option label="test" value="test"></el-option>-->
            <!--&lt;!&ndash;<el-option v-for="(item,index) in formTypeList" :label="item.text" :value="item.value"></el-option>&ndash;&gt;-->
          <!--</el-select>-->
          <el-cascader
            placeholder="请选择" v-model="changeSalaryCard.bankProvinces" popper-class="provinces-cascader"
            :options="provincesOptions" :clearable="true" :separator="'-'" :props="defaultCascaderParams"
            filterable></el-cascader>
        </el-form-item>
        <el-form-item label="开户支行" prop="bankBranch" class="pay-form-item" :rules="[{ required: true, message: '请填写开户支行'}]">
          <el-input class="w-220" v-model="changeSalaryCard.bankBranch"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer operate-btns-bottom mt-5">
        <el-button class="cancel-btn-border" @click="editVisible=false">取消</el-button>
        <el-button type="primary" class="ml-30" :loading="changeSalaryBtnLoading" @click="changeSalary">确认提交</el-button>
      </div>
    </el-dialog>
    </div>
</template>
<script>
import dTable from '../../../components/common/table'

export default {
  components: { dTable },
  data () {
    return {
      // 导航
      pathData: [
        { name: '薪酬管理' },
        { name: '薪酬核算' }
      ],
      firstActice: 0,
      active: 0,
      obligorOptions: [], // 扣缴义务人数据
      bankCodeOptions: [], // 扣缴义务人数据
      tableData: [],
      setData: {
        fileId1: '',
        fileId2: '',
        fileId3: '',
        fileName: '',
        fileName1: '',
        fileName2: '',
        fileName3: '',
        incomeDate: '',
        obligorId: '',
        obligorName: '',
        type: '1',
        status1: '2', // 只看失败，为0是只看失败
        status2: '2', // 只看失败，为0是只看失败
        status3: '2', // 只看失败，为0是只看失败
        searchWord: ''
      },
      totalInfos:{
        totalInfo1:{
          successNum: 0,
          failNum: 0
        },
        totalInfo2:{
          successNum: 0,
          failNum: 0
        },
        totalInfo3:{
          successNum: 0,
          failNum: 0
        }
      },
      editVisible: false, // 调整明细
      changeSalaryCard: { // 变更信息卡
        empBankAccount: '',
        empBankDictCode: '',
        empAccountName: '',
        bankProvinces: [],
        bankBranch: '',
        employeeId: '', // 人员id ,在行数据获取
        id: '', // rowId
        title: ''
      },
      changeSalaryBtnLoading: false,
      provincesOptions: [],
      defaultCascaderParams: {
        label: 'value',
        value: 'value',
        children: 'children'
      },
      thirdCountData: {}, // 第三步-统计数据
      salaryItems: [], // 获取动态表头部分
      saveAccountingLoading: false
    }
  },
  created () {
    this.getObligorData() // 获取扣缴义务人数据
    this.getDynamitHead() // 获取动态表头部分
    this.getBankCode() // 获取银行名称
    this.getAllProvinces() // 获取所有省市
  },
  filters:{
    filterAmountByType(value,type,propertyName){
      if (value != undefined && value.length > 0) {
        var current = 0.00
        value.forEach(item => {
          if (type == item.itemType) {
            current = item
          }
        })
        var number = current[propertyName]
        if(number==null || number===""){
          number = 0
        }
        return (Math.round(parseFloat(number)*Math.pow(10,2))/Math.pow(10,2)).toFixed(2)
          .replace(/\d+/, function(s){
            return s.replace(/(\d)(?=(\d{3})+$)/g, '$1,')
          });
      }
      return 0.00
    }
  },
  computed: {
    firstTableHeight: function () {
      return this.$global.bodyHeight - 590 + 'px'
    },
    secondTableHeight: function () {
      return this.$global.bodyHeight - 350 + 'px'
    },
    thirdTableHeight: function () {
      return this.$global.bodyHeight - 420 + 'px'
    }
  },
  watch: {},
  methods: {
    // 获取扣缴义务人数据
    getObligorData () {
      this.$http({
        url: '/company/withholdingAgent/page',
        method: 'get',
        params: {}
      }).then(({ data }) => {
        this.obligorOptions = data.rows
      })
    },

    // 获取动态表头部分
    getDynamitHead () {
      this.$http({
        url: '/salary/insteadBill/getDynamitHead',
        method: 'get',
        params: {}
      }).then(({ data }) => {
        if(data.code==0){
          this.salaryItems = data.data
        }else{
          this.$message({
            message: this.$global.errorMsg,
            type: 'error'
          })
        }
      })
    },

    // 获取银行名称
    getBankCode () {
      this.$http({
        url: '/sys/list/dicts/10024',
        method: 'get',
        params: {}
      }).then(({ data }) => {
        this.bankCodeOptions = data.data.dictionaries
      })
    },

    // 获取所有省市
    getAllProvinces () {
      this.$http({
        url: '/sys/list/dicts/getAllAreaFormart',
        method: 'get',
        params: {}
      }).then(({ data }) => {
        this.provincesOptions = data.data
        console.log(this.provincesOptions)
      })
    },

    // 改变扣缴义务人数据
    getSelectLabel (value) {
      var options = this.$refs.obligor.options
      this.setData.obligorName = this.$global.getSelectLabel(value, options)
    },
    // 第一步选择 -- 请选择台账年月与所属扣缴义务人
    doFirstChoose () {
      console.log(this.setData.obligorId)
      let msg = ''
      if (!this.setData.yearDate) {
        msg = '请选择台账年月'
      } else if (!this.setData.obligorId) {
        msg = '请选择扣缴义务人'
      }
      if (msg) {
        this.$message({
          showClose: true,
          message: msg,
          type: 'warning'
        })
        return false
      }
      this.firstActice = 1
    },

    // 第一步 -- 获取表格数据
    getFirstTableData (tableRef) {
      var fileId = this.setData['fileId' + this.setData.type]
      var status = parseInt(this.setData['status' + this.setData.type])
      if (fileId != undefined && fileId != null && fileId != '') {
        var params = [
          {property: 'fileId', value: this.setData['fileId' + this.setData.type]},
          /*{property: 'incomeDate', value: this.setData.yearDate},
          {property: 'obligorId', value: this.setData.obligorId},
          {property: 'type', value: parseInt(this.setData.type)},*/
          {property: 'status', value: status==1?null:status}
        ]
        this.$refs[tableRef].fetch(params, 'post', '/salary/accounting/page')
      }
    },
    getParseIntValue(value){
        return parseInt(value.replace("-", ""))
    },
    // 第二步 -- 获取表格数据
    getSecondTableData () {
      var fileIds = []
      fileIds.push(this.setData.fileId1)
      fileIds.push(this.setData.fileId2)
      fileIds.push(this.setData.fileId3)
      var params = [
        { property: 'incomeDate', value: this.getParseIntValue(this.setData.yearDate) },
        { property: 'obligorId', value: this.setData.obligorId },
        { property: 'searchValue', value: this.setData.searchWord },
        { property: 'fileIds', value:fileIds },
        {property: 'status', value: 1}
      ]
      this.$refs.secondTable.fetch(params, 'post', '/salary/accounting/page')
    },
    // 第三步 -- 获取表格数据
    getThirdTableData () {
      var fileIds = []
      fileIds.push(this.setData.fileId1)
      fileIds.push(this.setData.fileId2)
      fileIds.push(this.setData.fileId3)
      var params = [
        { property: 'incomeDate', value: this.getParseIntValue(this.setData.yearDate) },
        { property: 'obligorId', value: this.setData.obligorId },
        { property: 'type', value:'' },
        { property: 'fileIds', value:fileIds }
      ]
      this.$refs.thirdTable.fetch(params, 'post', '/salary/platformBills/details/page')
    },

    // 上传成功后
    uploadSuccess (response, file, fileList) {
      if (response.code == 0) {
        var type = this.setData.type, fileId = response.data.id, fileName = file.name
        var obj = {
          type:parseInt(type),
          fileId: fileId,
          incomeDate: this.getParseIntValue(this.setData.yearDate),
          obligorId: this.setData.obligorId,
          obligorName: this.setData.obligorName
        }
        // 导入
        this.$http({
          url: '/salary/accounting/import/' + this.setData.type,
          method: 'post',
          data: obj
        }).then(({ data }) => {
            if(data.code == 0){

              if(type == 1){
                this.setData.fileId1 = fileId
                this.setData.fileName1 = fileName
              }else if(type == 2){
                this.setData.fileId2 = fileId
                this.setData.fileName2 = fileName
              }else if(type == 3){
                this.setData.fileId3 = fileId
                this.setData.fileName3 = fileName
              }

                this.totalInfos['totalInfo'+this.setData.type] = data.data
              // 获取表格数据
              this.getFirstTableData('firstTable'+this.setData.type)
            }else{
              this.$message({
                message: data.data.content?data.data.content:'系统异常',
                type: 'error'
              })
            }

        }).catch((data) => {
          this.$message({
            message: '系统异常',
            type: 'error'
          })
        })
      } else {
        this.$message({
          showClose: true,
          message: '上传失败',
          type: 'error'
        })
      }
    },

    // 第一步--下一步
    doFirstNext () {
      ++this.active
      this.getSecondTableData()
    },

    // 第二步-调整明细
    editDetail (row) {
      /*this.changeSalaryCard.employeeId = row.employeeId
      this.changeSalaryCard.id = row.id*/
      this.changeSalaryCard = row
      this.changeSalaryCard.bankProvinces = [row.provinceName,row.cityName]
      this.changeSalaryCard.title = row.employeeName + row.incomeDate + '调整明细'
      this.editVisible = true
    },

    // 第二步-调整明细-保存
    changeSalary () {
      this.$refs['changeSalaryCard'].validate((valid) => {
        if (valid) {
          this.changeSalaryBtnLoading = true
          var obj = {
            bankAccount: this.changeSalaryCard.empBankAccount,
            bankCode: this.changeSalaryCard.empBankDictCode,
            bankName: this.$global.getSelectLabel(this.changeSalaryCard.empBankDictCode,this.$refs.bankName.options),
            bankAccountName: this.changeSalaryCard.empAccountName,
            bankBranch: this.changeSalaryCard.bankBranch,
            employeeId: this.changeSalaryCard.employeeId,
            id: this.changeSalaryCard.id,
            bankProvince: this.changeSalaryCard.bankProvinces[0],
            bankCity: this.changeSalaryCard.bankProvinces[1]
          }
          this.$http({
            url: '/salary/accounting/adjustDetail',
            method: 'post',
            data: obj
          }).then(({ data }) => {
            this.changeSalaryBtnLoading = false
            if (data.code == 0) {
              // 获取表格数据
              this.getSecondTableData()
              this.editVisible = false
              this.$message({
                message: '保存成功',
                type: 'success'
              })
            } else {
              this.$message({
                message: '系统异常',
                type: 'error'
              })
            }
          }).catch((data) => {
            this.$message({
              message: '系统异常',
              type: 'error'
            })
            this.changeSalaryBtnLoading = false
          })
        }
      })
    },

    // 第二步-下一步
    doSecondNext () {
      ++this.active
      this.getThirdCountData()
      this.getThirdTableData()
    },

    // 第三步-统计数据
    getThirdCountData () {
      var fileIds = []
      fileIds.push(this.setData.fileId1)
      fileIds.push(this.setData.fileId2)
      fileIds.push(this.setData.fileId3)
      var params = {
        incomeDate: this.getParseIntValue(this.setData.yearDate),
        obligorId: this.setData.obligorId,
        fileIds: fileIds.join(",")
      }
      this.$http({
        url: '/salary/platformBills',
        method: 'get',
        params: params
      }).then(({ data }) => {
        this.thirdCountData = data
      })
    },

    //  导出模板
    exportTemplate () {
      let type = this.setData.type
      this.$confirm('数据收集对象为当前客户所有员工（包括离职员工），是否导出这批员工名单?', '提示', {
        confirmButtonText: '是，导出员工名单',
        cancelButtonText: '否，导出空白模板',
        type: 'info',
        center: true,
        distinguishCancelAndClose: true,
      }).then(() => {
      //  是，导出员工名单
        var obj = this.setData
        obj.status = ''
        obj.incomeDate = this.getParseIntValue(this.setData.yearDate)
        this.$downloadFile('/salary/accounting/templates/' + type, 'get', {templateType: 2},
          this.$global.EXCEL)
        /*this.$downloadFile('/salary/accounting/export/' + type, 'post', obj,
          this.$global.EXCEL)*/
      }).catch(action => {
        //  否，导出空白模板$downloadFile
        if (action == 'cancel'){
          this.$downloadFile('/salary/accounting/templates/' + type, 'get', {templateType: 1},
            this.$global.EXCEL)
        }
      })
    },
    //  导出-第一步表格
    exportFirstData (step) {
      var obj = this.setData
      obj.incomeDate = this.getParseIntValue(this.setData.yearDate)
      if (step == '2') {
        // 导出第二步表格也是导出全部的，不分失败成功
        var fileIds = [];
        fileIds.push(this.setData.fileId1)
        fileIds.push(this.setData.fileId2)
        fileIds.push(this.setData.fileId3)
        obj.fileIds = fileIds.join(",")
        obj.status = 1
        this.$downloadFile('/salary/accounting/export', 'post', obj, this.$global.EXCEL)
      }else{
          obj.fielId = this.setData['fileId'+this.setData.type]
        this.$downloadFile('/salary/accounting/export/' + parseInt(this.setData.type), 'post', obj,
          this.$global.EXCEL)
      }

    },

    //  删除-第一步表格
    doDel () {
      var selections = this.$refs.firstTable.selections
      console.log(selections)
      if (!selections.length > 0) {
        this.$message({
          message: '请选择需要删除的数据！',
          type: 'warning'
        })
      } else {
        this.$confirm('确定进行删除操作?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var obj = { 'ids': selections }
          this.$http({
            url: '/salary/accounting',
            method: 'delete',
            data: this.$qs.stringify(obj)
          }).then(({ data }) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          }).catch((data) => {
            this.$message({
              message: '系统异常',
              type: 'error'
            })
          })
        }).catch(() => {

        })
      }
    },
    exportData () {
      var obj = {}
      obj.status = 1
      obj.fileIds = [this.setData.fileId1,this.setData.fileId2,this.setData.fileId3].join(",")
      this.$downloadFile('/salary/accounting/export', 'post', obj,
        this.$global.EXCEL)
    },
    //确认生成台账
    saveAccounting(){
      this.$confirm('确定生成台账?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.saveAccountingLoading = true
        var fileIds = []
        fileIds.push(this.setData.fileId1)
        fileIds.push(this.setData.fileId2)
        fileIds.push(this.setData.fileId3)
        this.$http({
          url: '/salary/accounting',
          method: 'post',
          data: {
            obligorId: this.setData.obligorId,
            serialNumber: this.thirdCountData.serialNumber,
            incomeDate: this.getParseIntValue(this.setData.yearDate),
            fileIds:fileIds
          }
        }).then(({ data }) => {
          this.saveAccountingLoading = false
          if (data.code == 0) {
            this.$router.push("/salaryAccount")//跳转到薪酬台账页面
          } else {
            this.$message({
              message: '系统异常',
              type: 'error'
            })
          }
        }).catch((data) => {
          this.saveAccountingLoading = false
          this.$message({
            message: '系统异常',
            type: 'error'
          })
        })
      })
    },

  //  切换类型
    changeType (val) {
      /*var type = val
      if(type == 1){
        this.getFirstTableData('firstTable1')
      }else if(type == 2){
        this.getFirstTableData('firstTable2')
      }else if(type == 3){
        this.getFirstTableData('firstTable3')
      }*/
    }
  }
}
</script>
<style lang="less">
  .provinces-cascader{
    .el-cascader-panel{
      max-height: 300px;
    }
  }

  .drag-upload{
    .el-upload{
      width: 100%;
      text-align: left;
      margin-top: 0;
      border: none;
    }
    .el-upload-dragger{
      display: inline-block;
      height: 150px;
      width: 100%;
      /*max-width: 700px;*/
      float: left;
      .el-icon-upload{
        margin-top: 30px;
      }
    }
  }
  .salaryAccounting-dialog{
    .el-dialog__body{
      padding-top: 10px;
    }
  }
</style>
<style lang="less" scoped>
  .emp-container {
    padding: 20px 30px;
  }
  .first-tip {
    display: inline-block;
    width: 800px;
    padding: 8px 30px;
    border: 1px solid #F5DDAE;
    text-align: left;
    background-color: #FEFCE7;
  }

  .first-border {
    display: inline-block;
    border: 1px solid #DDDDDD;
    padding: 50px;
    margin-top: 60px;
  }

  .upload-border{
    border: 1px dashed #DDDDDD;
    padding: 15px;
    margin-top: 10px;
    height: 120px;
    overflow: auto;
  }

  .spl-dialog{
    .el-form-item{
      margin-bottom: 10px;
    }
  }

  /*.error-msg {*/
  /*background-color: #EFF2F7;*/
  /*padding: 10px 20px;*/
  /*}*/

  /*.notes {*/
  /*padding: 10px 20px;*/
  /*}*/
</style>
